<template>
    <view class="personal-info-update">
        <view class="basic-info card">
            <Form ref="form" />
        </view>
        <view class="year-info card">
            <view class="title">
                <tm-text _class="text-weight-b" :font-size="32" color="#333" label="流年吉凶谱"></tm-text>
                <tm-text v-if="yearlyFortuneList.length" :font-size="28" color="#A37C3D" label="清空"
                    @click="handleClear('yearlyFortune')"></tm-text>
            </view>
            <view v-if="yearlyFortuneList.length" class="content">
                <TimeLine :timeLineData="yearlyFortuneList" />
            </view>
            <ImageButtom @click="navigateTo(pageLink.yearInfo, pageEvents)" class="add-year-info" :image="BtnBg2">
                <tm-text :font-size="28" color="#7D5D2A" label="添加流年吉凶谱"></tm-text>
            </ImageButtom>
        </view>
        <view class="life-info card">
            <view class="title">
                <tm-text _class="text-weight-b" :font-size="32" color="#333" label="人生大事件"></tm-text>
                <tm-text v-if="lifeEvents.length" :font-size="28" color="#A37C3D" label="清空"
                    @click="handleClear('lifeMilestone')"></tm-text>
            </view>
            <view v-if="lifeEvents.length" class="content">
                <TimeLine @clear="handleRemoveLifeEvents" :timeLineData="lifeMilestoneList" clear />
            </view>
            <ImageButtom @click="navigateTo(pageLink.lifeInfo, pageEvents)" class="add-life-info" :image="BtnBg2">
                <tm-text :font-size="28" color="#7D5D2A" label="添加人生大事件"></tm-text>
            </ImageButtom>
        </view>
        <ImageButtom @click="handleSubmit" class="add-info" :image="BtnBg">
            <tm-text :font-size="32" color="#fff" label="添加我的信息"></tm-text>
        </ImageButtom>
    </view>
</template>
<script setup lang="ts">
    import { ref, onMounted, computed } from 'vue';
    import ImageButtom from '@/components/ImageButton/index.vue';
    import TimeLine from './TimeLine/PersonalTimeline.vue';
    import Form from './Form/PersonalInfoForm.vue';
    import BtnBg2 from '/static/assets/images/common/btn-bg-2.png';
    import BtnBg from '/static/assets/images/common/btn-bg.png';
    import { pageLink } from '@/constants/link';
    import { navigateTo } from '@/utils/index.ts';
    import { CHANGE_EVENT } from '@/constants/events';
    import { useYearlyFortuneStore } from '@/stores/yearlyFortune';
    import { useLifeMilestoneStore } from '@/stores/lifeMilestone';

    const form = ref(null)
    const yearlyFortunes = ref([])
    const lifeEvents = ref([])
    const yearlyFortuneStore = useYearlyFortuneStore()
    const lifeMilestoneStore = useLifeMilestoneStore()
    const pageEvents = {
        acceptDataFromOpenedPage: async function (data) {
            const { event, page } = data
            if (event === CHANGE_EVENT) {
                if (page === pageLink.yearInfo) {
                    yearlyFortunes.value = await yearlyFortuneStore.list()
                } else if (page === pageLink.lifeInfo) {
                    lifeEvents.value = await lifeMilestoneStore.list()
                }
            }
        },
    }

    const yearlyFortuneList = computed(() => {
        return yearlyFortunes.value?.map(item => {
            const yearlyFortune = yearlyFortuneStore.fortuneTypeList?.find(type => item?.dictCode === type?.dictCode) || {};
            return {
                ...item,
                ...yearlyFortune
            }
        })
    })

    const lifeMilestoneList = computed(() => {
        return lifeEvents.value?.map((item) => {
            return {
                date: item.milestoneDate,
                dictValue: item.milestoneEvent.join('、'),
            }
        })
    })

    const handleClear = async (type) => {
        if (type === 'yearlyFortune') {
            yearlyFortuneStore.clean()
            yearlyFortunes.value = await yearlyFortuneStore.list()
        } else {
            lifeMilestoneStore.clean()
            lifeEvents.value = await lifeMilestoneStore.list()
        }
    }

    const handleRemoveLifeEvents = async (item) => {
        lifeMilestoneStore.remove([item.date])
        lifeEvents.value = await lifeMilestoneStore.list()
    }

    onMounted(async () => {
        yearlyFortunes.value = await yearlyFortuneStore.list()
        lifeEvents.value = await lifeMilestoneStore.list()
    })

    const handleSubmit = () => {
        form.value?.handleSubmit()
    }
</script>
<style lang="less" scoped>
    .personal-info-update {
        margin: 46rpx 40rpx;
    }

    .card {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 28rpx;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #F5F1EB;
            padding-bottom: 20rpx;
        }

        .content {
            padding: 28rpx 0;
        }
    }

    .basic-info {
        margin-bottom: 40rpx;
        margin-top: 44rpx;
    }

    .year-info {
        margin-bottom: 40rpx;
    }

    .life-info {
        margin-bottom: 60rpx;
    }

    .add-year-info,
    .add-life-info {
        width: 232rpx;
        height: 60rpx;
        margin: 0 auto;
        margin-top: 12rpx;
    }

    .add-info {
        background-color: #A37C3D;
        color: #fff;
        width: 414rpx;
        height: 88rpx;
        margin: 0 auto;
    }
</style>